<template>
  <div class="feedbackBox">
    <!--提交反馈-->
    <div class="feedbackForm">
      <el-input v-model.trim="submitData.title" placeholder="输入标题">
        <template #prepend>标题：</template>
      </el-input>
      <el-input
          v-model.trim="submitData.content"
          :autosize="{ minRows: 2, maxRows: 10 }"
          type="textarea"
          placeholder="正文写在这里哦！"
          class="feedbackInput"
      />
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
    <!--查看反馈-->
    <div class="records">
      <el-card
        shadow="hover"
        v-for="item in feedbackList"
        :key="item.fid"
        @click="openRecover(item)"
      >
        <div class="title">{{item.title}}</div>
        <div class="status">{{item.status}}</div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
  import {onBeforeMount,reactive} from "vue"
  import {useRouter} from "vue-router"
  import {ElMessage,ElMessageBox } from "element-plus"

  import {useUserStore} from "../config/pinia/user.js"
  import {http} from "../config/axios/index.js"

  //用户状态
  const userStore = useUserStore()

  //路由对象
  const router = useRouter()

  //提交表单数据
  const submitData = reactive({
    title: "",
    content: "",
    uid: userStore.userInfo.uid
  })

  //提交表单
  async function submit(){
    if(submitData.title === ""){
      return ElMessage({
        showClose: true,
        message: "标题不能为空",
        center: true,
      })
    }
    const res = await http({
      method: "GET",
      url: "feedback/add_feedback",
      params: submitData
    })
    if(res.data.code === 0){
      await getFeedback()
      ElMessage({
        showClose: true,
        message: "反馈成功",
        center: true,
      })
    }
  }

  //反馈记录
  const feedbackList = reactive([])

  //获取反馈记录
  async function getFeedback(){
    const res = await http({
      method: "GET",
      url: "feedback/get_feedback",
      params: {
        uid: userStore.userInfo.uid
      }
    })
    if(res.data.code === 0){
      feedbackList.splice(0,feedbackList.length)
      feedbackList.push(...res.data.data.feedbackList)
      feedbackList.reverse()
      console.log(feedbackList)
    }
  }

  //弹出回复内容
  function openRecover(item){
    ElMessageBox.alert(item.recover || "暂无回复",item.title,{
      draggable: true,
      showClose: false
    })
  }

  //组件挂载前
  onBeforeMount(()=>{
    if(!userStore.isLogin){
      return router.push({name: "Sign"})
    }
    getFeedback()
  })
</script>

<style scoped>
  .feedbackBox{
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
  .feedbackForm{
    padding: 20px;
    border-right: 2px dotted #cccccc;
  }
  .feedbackInput{
    margin: 20px 0;
  }
  .records{
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
  .records .title{
    font-size: 20px;
    padding-bottom: 15px;
  }
  .records .status{
    font-size: 14px;
    text-align: right;
  }
</style>